<template>
	<view>
		<view class="page_header">
			<view class="header-img-0" :style="{height:StatusBarRpx+'rpx'}"> </view>
			<view class="page_header_title" :style="{height:CustomTitleBar+'rpx'}">
				仓库
			</view>
		</view>
		<view class="header-height" :style="{height:CustomBarRpx+'rpx'}"> </view>
		<u-gap height="30"></u-gap>
		<view class="page_tabs">
			<u-tabs-swiper ref="tabs" :list="list" @change="change" :current="current" active-color="#457af7"
				:is-scroll="false" inactive-color="#fff" bg-color="#37003f"></u-tabs-swiper>
		</view>
		<view v-show="swiperCurrent == 0" class="">
			<view class="topbtns topNav n-flex-row n-justify-between" >
				<view class="n-flex-row">
					<view class="topbtn" :class="isSelect?'active':''" @click="get_all"> {{ $t('全部') }}
					</view>
					<view class="topbtn" :class="!isSelect?'active':''" @click="yiduihuan()" > {{ $t('已转换') }}
					</view>
				</view>
			</view>
			<u-gap height="30"></u-gap>
			<view class="pl_header" v-if="isSelect">
				<view class="pl_duihuan" 
					style="width: 100%; padding-left:40rpx; padding-right:40rpx;"
					@click="showDH" v-if="goodsList.length > 0">
					<view class="left">
						<text> 共 {{ goods_count }} 件商品</text>
					</view>
					<view class="right">
						{{ $t('一键全部转换') }}
						<u-icon name="arrow-right-double" style="padding-left: 10rpx;"></u-icon>
					</view>
				</view>
			</view>
			<view class="goodsList" v-if="smallTit == 0">
				<view class="list" v-for="(item,idx) in goodsList" :key="idx">
					<view class="goods">
						<view class="tit" style="font-size: 26rpx;">{{item.goods_data.title}}</view>
						<view class="shop_goods">
							<image :src="item.goods_data.image" mode=""></image>
							<view class="info">
								<view class="bi" v-if="item.status == 0">
									{{ $t("可转换") }}：<text>{{item.exchange_integral}}</text>{{ $t('糯米值') }}
								</view>
								<view class="time" v-else>{{ $t('转换时间') }}：{{$u.timeFormat(item.exchange_time, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
								<view class="tip">
									<view class="btns n-flex-row">
										<view class="btn dui" @click="showSafePanel(item,0)" > {{ $t('加入保险柜') }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="number">数量：x {{item.number}}</view>
					</view>
					<view class="tip" v-if="item.status == 0">
						<!-- <view class="tit">
							提示:请在<text>2022/11/02 00:00:00</text>前提取，过期不能提货，只能转换
						</view> -->
						<view class="btns n-flex-row">
							<view class="btn ti" @click="showSafePanel(item,2)"> {{ $t('转赠') }} </view>
							<view class="btn ti" @click="goTiHuo(item)"> {{ $t('提货') }} </view>
							<view class="btn dui" @click="isagain(item.id)" v-if="cardList.length != 0"> {{ $t('重抽') }}
							</view>
							<view class="againbox" v-if="item.exchange_integral > 0">
								<view class="btn dui" @click="duihuan(item)"> {{ $t('转换') }} </view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="height: 100rpx;"></view>
				<u-empty text="暂无数据" mode="list" :show="nullShow" margin-top="400"></u-empty>
			</view>
			<view class="goodsList" v-if="smallTit == 1">
				<view class="list z_huan" v-for="(item,idx) in goodsList" :key="idx">
					<view class="goods" style="border: none;">
						<image class="goods_img" :src="item.goods_data.image" mode=""></image>
						<view class="info">
							<view class="tit"  style="color: #333; font-size: 26rpx;">{{item.goods_data.title}}</view>
							<view class="v_number">{{ $t('转换数量') }}：X{{item.number}}</view>
							<view class="time" style="color: #999;">{{ $t('转换时间') }}：{{$u.timeFormat(item.exchange_time, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
						</view>
					</view>
				</view>
				<u-empty text="暂无数据" mode="list" :show="nullShow" margin-top="400"></u-empty>
			</view>
		</view>
		<view v-show="swiperCurrent == 1" class="">
			<view class="goodsList">
				<view class="list" v-for="(item,idx) in boxList" :key="idx">
					<view class="goods" style="border-bottom: none;">
						<view class="tit" style="font-size: 26rpx;">{{item.goods_data.title}}</view>
						<view class="shop_goods">
							<image :src="item.goods_data.image" mode=""></image>
							<view class="info">
								<view class="bi" v-if="item.status == 0">
									{{ $t("可转换") }}：<text>{{item.exchange_integral}}</text>{{ $t('糯米值') }}
								</view>
								<view class="time" v-else>{{ $t('转换时间') }}：{{$u.timeFormat(item.exchange_time, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
								<view class="tip">
									<view class="btns n-flex-row">
										<view class="btn dui" @click="showSafePanel(item,1)" > {{ $t('移出保险柜') }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="number">数量：x {{item.number}}</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无数据" mode="list" :show="mangheShow"></u-empty>
		</view>
		<view v-show="swiperCurrent == 3" class="">
			<view>
				<view class="goodsList">
					<view class="list" v-for="(item,idx) in zhuanList" :key="idx">
						<view class="goods1">
							<image :src="item.goods_data.image" mode=""></image>
							<view class="info">
								<view class="tit">{{item.goods_data.title}}</view>
								<view class="row">时间：{{item.create_time}}</view>
								<view class="row" v-if="item.status_text == '赠送他人'">受赠人：{{item.receive_nickname}}</view>
								<view class="row" v-else>赠送人：{{item.give_nickname}}</view>
							</view>
							<view class="state">{{item.status_text}}</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无数据" mode="list" :show="zhuanShow"></u-empty>
		</view>
		<u-tabbar v-model="current" height="56px" :border-top="false" bg-color="#fff" inactive-color="#666"
			active-color="#37003F" :list="tabbar" ></u-tabbar>
		<u-popup v-model="is_show_dh" mode="bottom" border-radius="15" length="968rpx">
			<view class="pop_title">兑换全部商品</view>
			<view class="pop_content">
				<scroll-view scroll-y="true" style="height: 760rpx;">
					<view class="btmbox">
						<view class="n-flex-row n-align-center" style="font-size:32rpx;">
							{{ $t("共") }}{{dh_count}}{{ $t("件") }} | {{ $t("合计") }}：<text class="bi"><text class="num">{{dh_sum_price}}</text>{{ $t("糯米值") }}</text> 
						</view>
						<view class="tis">
							糯米值转换根据市场成本变化，一经转换无法撤销
						</view>
					</view>
					<view class="rule">
						<!-- <view class="tit">
							转换规则
						</view> -->
						<rich-text :nodes="rule"></rich-text>
					</view>
				</scroll-view>
			</view>
			<view class="pop_bottom_btngroup">
				<view class="b_dh" @click="batch_duihuan">{{ $t("立即转换") }}</view>
			</view>
		</u-popup>
		<u-popup v-model="safe_panel_show" mode="center" border-radius="20">
			<view class="safe_panel">
				<view class="tit">{{ safe_title }}</view>
				<view class="safe_panel_main">
					<view class="mgoods">
						<view class="gimage">
							<image style="width: 50px; height:50px;" :src="nowGoods.goods_data.image" mode=""></image>
						</view>
						<view class="gtitle">{{nowGoods.goods_data.title}}</view>
					</view>
					<view class="safe_form">
						<u-number-box :min="1" v-model="goods.goods_num" :max="goods.max_goods_num"></u-number-box>
					</view>
					<view v-if="safe_type == 2" class="save_form" style="margin-top:20rpx;">
						<view class="tit">{{ $t('请输入转赠人的手机号') }}</view>
						<u-input v-model="goods.phone" type="number" maxlength="11" :border="true" placeholder="请输入转赠人注册手机号" />
						<view class="tip">{{ $t('注：一旦转赠成功不可退货，请谨慎操作') }}</view>
					</view>
					
				</view>
				<view class="btns1">
					<view class="btn11 a" @click="cancelSafe">{{ $t('取消') }}</view>
					<view class="btn11 b" @click="safeOperate">{{ $t('确定') }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {tabbar} from "@/common/tabbar.js"
	export default {
		data() {
			return {
				tabbar:tabbar,
				current : 4,
				nullShow: false,
				mangheShow: false,
				zhuanShow: false,
				list: [{
					name: this.$t('商品')
				}, {
					name: this.$t('保险柜')
				}, 
				// #ifndef MP-WEIXIN
				{
					name: this.$t('转赠')
				},
				// #endif
				],
				current: 0,
				swiperCurrent: 0,
				dataBuffer: true,
				isSelect: true,
				smallTit: 0,
				goodsList: [],
				goods_count:0,
				isOne: '0',
				boxList: [],
				cardList: [],
				show: false,
				againshow: false,
				againId: '',
				zhuan: false,
				phone: '', //转赠人手机号
				zhuanId: '',
				zhuanList: [],
				page :1,
				status: 'more', //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中 
				is_show_dh:false,
				dh_count: 0,
				dh_sum_price: 0,
				rule:'',
				safe_panel_show:false,
				nowGoods:{},
				goods:{},
				max_goods_num:0,
				safe_type:0, // 0 是加入保险柜 、 1是移除保险柜。
				safe_title:'',
			}
		},

		onLoad() {
			console.log("111222");
			uni.$on('sc', (data) => {
				if (data == 0) {
					this.current = 0
				}
				if (data == 1) {
					this.current = 1
				}
			})
		},
		onUnload() {
			uni.$off('sc');
		},
		onShow() {
			this.page = 1;
			if (uni.getStorageSync("user")) {
				this.all()
				this.getCard()
			}
		},
		//计算属性
		computed: {
			allSelect: {
				set: function(newVal) {
					this.goodsList.forEach(item => {
						item.check = newVal
					})
				},
				get: function() {
					return this.goodsList.every(item => {
						return item.check == true
					})
				}
			}
		},
		methods: {
			reloadData(){
				this.page = 1;
				if (uni.getStorageSync("user")) {
					this.all()
					this.getCard()
				}
			},
			updatedata(){
				if (uni.getStorageSync("user")) {
					this.page = 1;
					this.all()
					this.getCard()
				}
			},
			// 提货
			goTiHuo(item){
				let url = '/pagesB/pages/cangku/piliang_edit?type=3&goods_id=' + item.goods_id;
				this.$.to(url);
			},
			// 确定转赠
			zhuanz() {
				let that = this;
				if(!that.goods.goods_id || !that.goods.goods_num){
					that.$tip.tip(res.data.msg)
					return;
				}
				if (!that.$u.test.mobile(that.goods.phone)) {
					that.$tip.tip("请输入正确的手机号")
					return
				}
				that.$http({
					url: "api/order/prize_give",
					data: {
						goods_id: that.goods.goods_id,
						goods_num: that.goods.goods_num,
						receive_username: that.goods.phone
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						that.all()
						that.getCard()
						that.cancelSafe();
						that.$tip.tip(res.data.msg)
					} else {
						that.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			kai(id, boxfl_id,num) {
				uni.navigateTo({
					url: `/pagesB/pages/home/luckbox?id=${boxfl_id}&order_sn=${id}&drawNum=${num}`
				})
			},
			isagain(id) {
				this.againId = id
				this.againshow = true
			},
			// 重抽
			again(id) {
				if (this.cardList.length == 0) {
					this.$tip.tip("没有可使用的重抽卡")
					return
				}
				this.$http({
					url: "api/order/redraw_prize",
					data: {
						card_id: this.cardList[0].id,
						id: this.againId
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.show = true
						this.getCard();
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			// 获取重抽卡
			getCard() {
				this.$http({
					url: "api/member/get_my_card",
				}).then(res => {
					if (res.data.code == 1) {
						let data = res.data.data;
						let data_list = [];
						data.forEach((item, index)  => {
							if(item.card_data.type == 1){
								item = item;
								data_list.push(item)
							}
						})
						this.cardList = data_list
					}
				}).catch(err => {});
			},
			//未开盒的盲盒
			getBox() {
				
				this.$http({
					url: "api/order/get_prize_record",
					data: {
						status: 0,
						is_safe:1,
						page : this.page
					}
				}).then(res => {
					if (res.data.code == 1) {
						if (this.page == 1 && res.data.data.list.length == 0) {
							this.mangheShow = true
						} else {
							this.mangheShow = false
						}
						
						if (this.page == 1) this.boxList = [];
						let curPageData = res.data.data.list
						// console.log(this.boxList, ' res.data.data.list'  ,curPageData)
						this.boxList = this.boxList.concat(curPageData);
						if (curPageData && curPageData.length > 0) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
						console.log(this.boxList);
						// this.boxList = res.data.data
					
					} else {
						this.boxList = []
						this.mangheShow = true
					}
				}).catch(err => {});
			},
			// 前往盒柜
			confirm() {
				this.getBox()
				this.current = 1
				this.swiperCurrent = 1
			},
			get_all(){
				this.page = 1;
				this.all();
			},
			// 全部
			all() {
				this.isSelect = true;
				this.smallTit = 0
				this.getData(0)
			},
			// 已转换
			yiduihuan() {
				this.isSelect = false;
				this.smallTit = 1
				this.page = 1;
				this.getData(2)
			},
			lower(e){
				console.log(this.status , '222222222222')
				if (this.status != 'noMore') {
					this.getData()
				}
			},
			getData(sta) {
				uni.showLoading({
					title: "加载中"
				})
				// this.goodsList = []
				this.$http({
					url: "api/order/get_prize_record",
					data: {
						status: sta,
						page : this.page
					}
				}).then(res => {
					uni.hideLoading()
					console.log(res, "商品");
					if (res.data.code == 1) {
						if (this.page == 1 && res.data.data.list.length == 0) {
							this.nullShow = true
						} else {
							this.nullShow = false
						}
						res.data.data.list.forEach(item => {
							item.check = false
						})
						this.goodsList = res.data.data.list
						this.goods_count = res.data.data.count;
						this.status = 'noMore';
					} else {
						this.nullShow = true
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			change(index) {
				this.current = index;
				this.swiperCurrent = index;
				this.page = 1;
				if (this.current == 0) {
					this.all()
					this.goodsList = [];
				} else if (this.current == 1) {
					this.getBox()
					 this.boxList = [];
				} else if (this.current == 2) {
					this.getZhuan()
				}
			},
			// 转赠记录
			getZhuan() {
				uni.showLoading({
					title: "加载中"
				})
				this.$http({
					url: "api/order/prize_give_log",
					data: {
						page : this.page
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						if (this.page == 1 && res.data.data.length == 0) {
							this.zhuanShow = true
						} else {
							this.zhuanShow = false
						}
						if (this.page == 1) this.zhuanList = [];
						let curPageData =  res.data.data
						console.log(this.zhuanList, ' res.data.data.list'  ,curPageData)
						this.zhuanList = this.zhuanList.concat(curPageData);
						if (curPageData && curPageData.length > 0) {
							this.status = 'more';
							this.page++;
						} else {
							this.status = 'noMore';
						}
						// this.zhuanList = res.data.data
					} else {
						this.zhuanShow = true
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			tihuo(item) {
				let data = {
					image: item.goods_image,
					name: item.goods_name,
					yunfei: item.delivery_fee
				}
				uni.setStorageSync('tihuo', data)
				uni.navigateTo({
					url: '/pagesB/pages/cangku/confirmOrder?id=' + item.id
				})
			},
			duihuan(item) {
				let data = [{
					image: item.goods_data.image,
					name: item.goods_data.title,
					price: item.exchange_integral,
					goods_id: item.goods_id,
					id:item.id
				}]
				uni.setStorageSync('dui', data)
				uni.navigateTo({
					url: '/pagesB/pages/cangku/duihuan?goods_id=' + item.goods_id
				})
			},
			showSafePanel(item, type){
				this.safe_type = type;
				this.safe_panel_show = true;
				this.nowGoods = item;
				this.goods.goods_id = item.goods_id;
				this.goods.max_goods_num = item.number;
				this.goods.goods_num = item.number;
				switch(type){
					case 0:
						this.safe_title = '请选择加入保险箱的数量';
						break;
					case 1:
						this.safe_title = '请选择移除保险箱的数量';
						break;
					case 2:
						this.safe_title = '请选择转增的数量';
						break;
				}
			},
			safeOperate(){
				switch(this.safe_type){
					case 0:
						this.joinSafe();
						break;
					case 1:
						this.removeSafe();
						break;
					case 2:
						this.zhuanz();
						break;
				}
			},
			cancelSafe(){
				this.safe_panel_show = false;
				this.goods.goods_id = 0;
				this.goods.max_goods_num = 0;
				this.goods.goods_num = 0;
			},
			joinSafe(){
				let that = this;
				if(!that.goods.goods_id || !that.goods.goods_num){
					this.$tip.tip(res.data.msg)
					return;
				}
				that.$http({
					url: "api/order/joinSafe",
					data: {
						goods_id: that.goods.goods_id,
						goods_num: that.goods.goods_num
					}
				}).then(res => {
					that.$tip.tip(res.data.msg)
					if(res.data.code == 1){
						that.all()
						that.getCard()
						that.cancelSafe();
					}
				});
			},
			removeSafe(item){
				let that = this;
				console.log(item);
				if(!that.goods.goods_id || !that.goods.goods_num){
					this.$tip.tip(res.data.msg)
					return;
				}
				that.$http({
					url: "api/order/removeSafe",
					data: {
						goods_id: that.goods.goods_id,
						goods_num: that.goods.goods_num
					}
				}).then(res => {
					if(res.data.code == 1){
						that.page = 1;
						that.getCard()
						that.getBox()
						that.cancelSafe();
					}
				});
			},
			showDH(){
				let that = this;
				this.getRule();
				this.$http({
					url: "api/order/batch_dhall_query",
					data: {
						status: 0
					}
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						that.is_show_dh = true;
						console.log(res);
						console.log(res.data.data.sum_price);
						that.dh_count = res.data.data.count;
						that.dh_sum_price = res.data.data.sum_price;
					} else {
						that.is_show_dh = false;
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			getRule(){
				this.$http({
					url: "api/common/get_agreement",
					data: {
						name: 'exchange_tisp'
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.rule = res.data.data.content
					} else {
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			batch_duihuan(){
				let that = this;
				// return
				that.$http({
					url: "api/order/batch_prize_exchange",
				}).then(res => {
					if (res.data.code == 1) {
						that.$tip.tip(res.data.msg)
						setTimeout(() => {
							that.reloadData();
						},1000);
						that.is_show_dh = false;
					} else {
						that.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
</style>
<style>
	@import url("../../static/css/cangku.css");
	.page_header{
		position: fixed;
		z-index: 100;
		width: 100%;
		top: 0;
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
	.page_header_title{      
		margin: 0 30rpx;
		width: 100%;
		align-items: center;
		text-align: center;
		display: flex;
		justify-content: center;
	 }
</style>
